import React, { useEffect, useState } from 'react';
import {Card, Empty} from "antd";

//
//
export default function AtSchoolPie(props: any ) {

        //设置饼图数据
        const echarts = require('echarts');
        // console.log(props.data)

        useEffect(() => {
             getOption(props.data);
        }, [props.data]);


        function getOption(data:any) {
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                // legend: {
                //     type: 'scroll',
                //     orient: 'vertical',
                //     right: 10,
                //     top: 20,
                //     bottom: 20,
                //     data: ['在校', '不在校'],
                // },
                series: [
                    {
                        name: '人数',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: data,
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }


        return (
            <Card className="cardStyle" title='在校统计'>
                {
                    <div id="main" style={{height:"300px"}}>
                    </div>
                }
            </Card>

        )


}

